<form [formGroup]="userForm" (ngSubmit)="createUser()" class="space-y-6 p-6">

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">Full Name:</label>
    <input type="text" pInputText formControlName="name" placeholder="Enter full name..." class="w-full md:w-80"/>
  </div>
  @if (userForm.get('name')?.invalid && (userForm.get('name')?.dirty || userForm.get('name')?.touched)) {
    <small class="text-red-500 pl-44">
      Name is required and must be at least 3 characters.
    </small>
  }

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">Email:</label>
    <input type="email" pInputText formControlName="email" placeholder="Enter email..." class="w-full md:w-80"/>
  </div>
  @if (userForm.get('email')?.invalid && (userForm.get('email')?.dirty || userForm.get('email')?.touched)) {
    <small class="text-red-500 pl-44">
      Enter a valid email address.
    </small>
  }

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">Username:</label>
    <input type="text" pInputText formControlName="username" placeholder="Enter username..." class="w-full md:w-80"/>
  </div>
  @if (userForm.get('username')?.invalid && (userForm.get('username')?.dirty || userForm.get('username')?.touched)) {
    <small class="text-red-500 pl-44">
      Username is required.
    </small>
  }

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">Password:</label>
    <input type="password" pInputText formControlName="password" placeholder="Enter password..." class="w-full md:w-80"/>
  </div>
  @if (userForm.get('password')?.invalid && (userForm.get('password')?.dirty || userForm.get('password')?.touched)) {
    <small class="text-red-500 pl-44">
      Password must be at least 6 characters long.
    </small>
  }

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">Accessible Libraries:</label>
    <p-multiselect
      [options]="libraries"
      formControlName="selectedLibraries"
      placeholder="Select Libraries"
      optionLabel="name"
      display="chip"
      class="w-full md:w-80"
      appendTo="body">
    </p-multiselect>
  </div>
  @if (userForm.get('selectedLibraries')?.invalid && (userForm.get('selectedLibraries')?.dirty || userForm.get('selectedLibraries')?.touched)) {
    <small class="text-red-500 pl-44">
      At least one library must be selected.
    </small>
  }

  <div>
    <p class="text-right w-40 font-medium">Permissions:</p>
    <div class="flex flex-col gap-2 pl-44">
      <div class="flex items-center gap-2">
        <p-checkbox formControlName="permissionUpload" [binary]="true"></p-checkbox>
        <label>Upload Books</label>
      </div>

      <div class="flex items-center gap-2">
        <p-checkbox formControlName="permissionDownload" [binary]="true"></p-checkbox>
        <label>Download Books</label>
      </div>

      <div class="flex items-center gap-2">
        <p-checkbox formControlName="permissionEditMetadata" [binary]="true"></p-checkbox>
        <label>Edit Metadata</label>
      </div>

      <div class="flex items-center gap-2">
        <p-checkbox formControlName="permissionManipulateLibrary" [binary]="true"></p-checkbox>
        <label>Manage Library</label>
      </div>

      <div class="flex items-center gap-2">
        <p-checkbox formControlName="permissionEmailBook" [binary]="true"></p-checkbox>
        <label>Email Book</label>
      </div>

      <div class="flex items-center gap-2">
        <p-checkbox formControlName="permissionDeleteBook" [binary]="true"></p-checkbox>
        <label>Delete Book</label>
      </div>

      <div class="flex items-center gap-2">
        <p-checkbox formControlName="permissionAccessOpds" [binary]="true"></p-checkbox>
        <label>Access OPDS</label>
      </div>

      <div class="flex items-center gap-2">
        <p-checkbox formControlName="permissionSyncKoreader" [binary]="true"></p-checkbox>
        <label>KOReader Sync</label>
      </div>

      <div class="flex items-center gap-2">
        <p-checkbox formControlName="permissionSyncKobo" [binary]="true"></p-checkbox>
        <label>Kobo Sync</label>
      </div>

      <div class="flex items-center gap-2">
        <p-checkbox formControlName="permissionAdmin" [binary]="true"></p-checkbox>
        <label class="text-orange-500 font-bold">Admin</label>
      </div>
    </div>
  </div>

  <div class="flex justify-end">
    <p-button label="Create User" [disabled]="userForm.invalid" type="submit">
    </p-button>
  </div>
</form>
